<script setup>
import { RouterLink, RouterView } from "vue-router";
import { ref } from "vue";
import AsideMenu from "@/components/mains/AsideMenu.vue";
import Header from "@/components/mains/Header.vue";
import Logo from "@/components/mains/Logo.vue";
</script>

<template>
  <el-container class="layout-container-main">
    <el-header height="60px">
      <el-menu class="el-menu-demo" mode="horizontal" :ellipsis="false">
        <el-menu-item>
          <Logo />
        </el-menu-item>
        <el-menu-item>not found</el-menu-item>
        <el-menu-item>联系我们</el-menu-item>
      </el-menu>
    </el-header>

    <el-container class="layout-container-main-body">
      <el-main>
        <div style="background: white">404</div>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.layout-container-main {
  width: 100vw;
}
.layout-container-main .el-header {
  color: var(--el-text-color-primary);
  padding: 0px;
}
.layout-container-main .el-aside {
  color: var(--el-text-color-primary);
}

.layout-container-main .el-main {
  padding: 20px;
  overflow-y: auto;
  height: calc(100vh - 60px);
}

.el-menu--horizontal > .el-menu-item:nth-child(2) {
  margin-right: auto;
}
</style>
